<#import "/spring.ftl" as spring />
<@spring.bind "data" />
<head>
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery(".datepicker").datepicker({
				dateFormat: 'dd/mm/yy',
				minDate: new Date()
			});
		});
	</script>
</head>
<div id="main-content"> <!-- Main Content Section with everything -->			
	<noscript> <!-- Show a notification if the user has disabled javascript -->
		<div class="notification error png_bg">
			<div>
				Javascript is disabled or is not supported by your browser. Please <a href="http://browsehappy.com/" title="Upgrade to a better browser">upgrade</a> your browser or <a href="http://www.google.com/support/bin/answer.py?answer=23852" title="Enable Javascript in your browser">enable</a> Javascript to navigate the interface properly.
			</div>
		</div>
	</noscript>
	
	<!-- Page Head -->
	<h2>Welcome ${data.username}</h2>
	<p id="page-intro">What would you like to do?</p>
	
	<ul class="shortcut-buttons-set">
		
		<li><a class="shortcut-button" href="#"><span>
			<img src="/images/admin/icons/pencil_48.png" alt="icon" /><br />
			Write an Article
		</span></a></li>
		
		<li><a class="shortcut-button" href="#"><span>
			<img src="/images/admin/icons/paper_content_pencil_48.png" alt="icon" /><br />
			Create a New Page
		</span></a></li>
		
		<li><a class="shortcut-button" href="#"><span>
			<img src="/images/admin/icons/image_add_48.png" alt="icon" /><br />
			Upload an Image
		</span></a></li>
		
		<li><a class="shortcut-button" href="#"><span>
			<img src="/images/admin/icons/clock_48.png" alt="icon" /><br />
			Add an Event
		</span></a></li>
		
		<li><a class="shortcut-button" href="#messages" rel="modal"><span>
			<img src="/images/admin/icons/comment_48.png" alt="icon" /><br />
			Open Modal
		</span></a></li>
		
	</ul><!-- End .shortcut-buttons-set -->
	
	<div class="clear"></div> <!-- End .clear -->
	
	<div class="content-box"><!-- Start Content Box -->
		
		<div class="content-box-header">
			
			<h3>Gửi mail cho thành viên</h3>
			
			<ul class="content-box-tabs">
				<li><a href="#tab1" <#if (data.activeTab == 1)>class="default-tab"</#if>>Danh sách templates</a></li> <!-- href must be unique and match the id of target div -->
				<li><a href="#tab2" <#if (data.activeTab == 0)>class="default-tab"</#if>>Soạn mail</a></li>
			</ul>
			
			<div class="clear"></div>
			
		</div> <!-- End .content-box-header -->
		
		<div class="content-box-content">
			
			<div class="tab-content <#if (data.activeTab == 1)>default-tab</#if>" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->
				
				<div class="notification attention png_bg">
					<a href="#" class="close"><img src="/images/admin/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
					<div>
						This is a Content Box. You can put whatever you want in it. By the way, you can close this notification with the top-right cross.
					</div>
				</div>
				
				<table>
					
					<thead>
						<tr>
						   <th><input class="check-all" type="checkbox" /></th>						   
						   <th>Tên</th>						   
						   <th>Ngày gửi</th>						   
						   <th>Nhóm nhận</th>
						   <th>Sử dụng MK-DB?</th>
						   <th>Sẽ gửi</th>
						   <th>Đã gửi</th>
						   <th>Đã gửi xong?</th>
						</tr>
						
					</thead>
				 	
					<tfoot>
						<tr>
							<td colspan="7">
								<div class="bulk-actions align-left">
									<select name="dropdown">
										<option value="option1">Choose an action...</option>
										<option value="option2">Save</option>
										<option value="option3">Disable</option>
										<option value="option4">Delete</option>
									</select>
									<a class="button" href="#">Apply to selected</a>
								</div>
								
								<div class="pagination">
									<a href="#" title="First Page">&laquo; First</a><a href="#" title="Previous Page">&laquo; Previous</a>
									<a href="#" class="number" title="1">1</a>
									<a href="#" class="number" title="2">2</a>
									<a href="#" class="number current" title="3">3</a>
									<a href="#" class="number" title="4">4</a>
									<a href="#" title="Next Page">Next &raquo;</a><a href="#" title="Last Page">Last &raquo;</a>
								</div> <!-- End .pagination -->
								<div class="clear"></div>
							</td>
						</tr>
					</tfoot>
				 
					<tbody>
						<#list data.list as item>
				 		<tr>
				 			<td><input type="checkbox" class="goal-check" rel="${item.id}"/></td>
				 			<td>
				 				<a href="${rc.contextPath}/admin/memberMail.html?id=${item.id}">${item.name}</a>
				 			</td>				 			
				 			<td>${item.date}</td>
				 			<td>${item.groupNames}</td>
				 			<td>${item.marketingDB?string("<center>X</center>","")}</td>
				 			<td><center>${item.totalEmail}</center></td>
				 			<td><center>${item.totalEmailSent}</center></td>
				 			<td>
				 				<#if item.sendingStatus == 3>
				 					<center>X</center>
				 				</#if>
				 			</td>
				 		</tr>
				 		</#list>
				 	</tbody>
					
				</table>
				
			</div> <!-- End #tab1 -->
			
			<div class="tab-content <#if (data.activeTab == 0)>default-tab</#if>" id="tab2">
			
				<form action="${rc.contextPath}/admin/memberMail.html" method="POST" name="data">
					
					<fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->
						<p>
							<label>Chọn nhóm</label>              
							<select name="memberMail.groups" class="small-input" multiple="multiple">
								<option value="ROLE_SUPER_ADMIN" ${data.memberMail.groups?seq_contains("ROLE_SUPER_ADMIN")?string("selected='selected'","")}>Super Admin</option>
								<option value="ROLE_ADMIN" ${data.memberMail.groups?seq_contains("ROLE_ADMIN")?string("selected='selected'","")}>Admin</option>
								<option value="ROLE_PREMIUM_USER" ${data.memberMail.groups?seq_contains("ROLE_PREMIUM_USER")?string("selected='selected'","")}>Premium User</option>
								<option value="ROLE_USER" ${data.memberMail.groups?seq_contains("ROLE_USER")?string("selected='selected'","")}>Normal User</option>
							</select> 
						</p>
						
						<p>
							<label>Chọn độ ưu tiên</label>              
							<select name="memberMail.priority" class="small-input">
								<option value="1" <#if (data.memberMail.priority?? && data.memberMail.priority==1)>selected="selected"</#if>>Ưu tiên 1</option>
								<option value="2" <#if (data.memberMail.priority?? && data.memberMail.priority==2)>selected="selected"</#if>>Ưu tiên 2</option>
								<option value="3" <#if (data.memberMail.priority?? && data.memberMail.priority==3)>selected="selected"</#if>>Ưu tiên 3</option>
								<option value="4" <#if (data.memberMail.priority?? && data.memberMail.priority==4)>selected="selected"</#if>>Ưu tiên 4</option>
							</select> 
						</p>
						
						<p>
							<label>Chọn database</label>
							<input type="checkbox" name="memberMail.igoalDB" ${data.memberMail.igoalDB?string("checked='checked'","")}/> iGoal User DB<br />
							<input type="checkbox" name="memberMail.marketingDB" ${data.memberMail.marketingDB?string("checked='checked'","")}/> iGoal EDM DB
						</p>
						
						<p>
							<label>Đặt tên cho template này:</label>
								<input class="text-input medium-input" type="text" id="small-input" name="memberMail.name" value="${data.memberMail.name}"/> <span style="display:none;" class="input-notification success png_bg">Successful message</span> <!-- Classes for input-notification: success, error, information, attention -->
								<br /><small>Tên riêng cho template, chỉ nên nhập plain text</small>
						</p>
						
						<p>
							<label>Tiêu đề:</label>
								<input class="text-input medium-input" type="text" id="small-input" name="memberMail.subject" value="${data.memberMail.subject}"/> <span style="display:none;" class="input-notification success png_bg">Successful message</span> <!-- Classes for input-notification: success, error, information, attention -->
								<br /><small>Tiêu đề cho email, chỉ nên nhập plain text</small>
						</p>				
						
						<p>
							<label>Nội dung email</label>
							<small>Các giá trị thay thế cho phép: $username, $firstName, $lastName</small>
							<textarea class="text-input textarea wysiwyg" id="textarea" name="memberMail.body" cols="79" rows="15">
								${data.memberMail.body}
							</textarea>
						</p>
						
						<p>							
							<input type="checkbox" onchange=""/> Gửi ngay bây giờ
							<label>Gửi vào ngày này:</label>
							<input class="text-input small-input datepicker" readonly="readonly" type="text" id="medium-input" name="memberMail.date" value="${data.memberMail.date}"/>
						</p>					
						
						<p>
							<input class="button" type="submit" value="Gửi" />
						</p>
						
					</fieldset>
					
					<div class="clear"></div><!-- End .clear -->
					<input type="hidden" name="memberMail.id" value="<#if data.memberMail.id??>${data.memberMail.id}</#if>"/>
				</form>
				
			</div> <!-- End #tab2 -->        
			
		</div> <!-- End .content-box-content -->
		
	</div> <!-- End .content-box -->
	
	<div class="content-box column-left">
		
		<div class="content-box-header">
			
			<h3>Content box left</h3>
			
		</div> <!-- End .content-box-header -->
		
		<div class="content-box-content">
			
			<div class="tab-content default-tab">
			
				<h4>Maecenas dignissim</h4>
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in porta lectus. Maecenas dignissim enim quis ipsum mattis aliquet. Maecenas id velit et elit gravida bibendum. Duis nec rutrum lorem. Donec egestas metus a risus euismod ultricies. Maecenas lacinia orci at neque commodo commodo.
				</p>
				
			</div> <!-- End #tab3 -->        
			
		</div> <!-- End .content-box-content -->
		
	</div> <!-- End .content-box -->
	
	<div class="content-box column-right closed-box">
		
		<div class="content-box-header"> <!-- Add the class "closed" to the Content box header to have it closed by default -->
			
			<h3>Content box right</h3>
			
		</div> <!-- End .content-box-header -->
		
		<div class="content-box-content">
			
			<div class="tab-content default-tab">
			
				<h4>This box is closed by default</h4>
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in porta lectus. Maecenas dignissim enim quis ipsum mattis aliquet. Maecenas id velit et elit gravida bibendum. Duis nec rutrum lorem. Donec egestas metus a risus euismod ultricies. Maecenas lacinia orci at neque commodo commodo.
				</p>
				
			</div> <!-- End #tab3 -->        
			
		</div> <!-- End .content-box-content -->
		
	</div> <!-- End .content-box -->
	<div class="clear"></div>
	
	
	<!-- Start Notifications -->
	
	<div class="notification attention png_bg">
		<a href="#" class="close"><img src="/images/admin/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
		<div>
			Attention notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero. 
		</div>
	</div>
	
	<div class="notification information png_bg">
		<a href="#" class="close"><img src="/images/admin/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
		<div>
			Information notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
		</div>
	</div>
	
	<div class="notification success png_bg">
		<a href="#" class="close"><img src="/images/admin/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
		<div>
			Success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
		</div>
	</div>
	
	<div class="notification error png_bg">
		<a href="#" class="close"><img src="/images/admin/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
		<div>
			Error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
		</div>
	</div>
	
	<!-- End Notifications -->
	
	<div id="footer">
		<small> <!-- Remove this notice or replace it with whatever you want -->
				&#169; Copyright 2009 Your Company | Powered by <a href="http://themeforest.net/item/simpla-admin-flexible-user-friendly-admin-skin/46073">Simpla Admin</a> | <a href="#">Top</a>
		</small>
	</div><!-- End #footer -->
	
</div> <!-- End #main-content -->